<template>
  <div class="">
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item name="zjm" class="w-[300px]">
          <a-input v-model:value="formState.zjm" placeholder="装备名称/助记码/装备编号/设备序列号" />
        </a-form-item>

        <a-form-item name="deptCode" label="科室" class="w-[300px] ml-4">
          <SelectSection v-model:value="formState.deptCode" placeholder="请输入" />
        </a-form-item>

        <a-form-item name="status" label="状态" class="w-[300px] ml-4">
          <a-select
            v-model:value="formState.status"
            :options="statusOptions"
            allow-clear
            placeholder="请选择"
            :field-names="{ label: 'name', value: 'value' }"
          />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2">
      <div class="flex mb-2">
        <BaseExport type="战救" name="配置列表" code="000587" :search-params="formState">导出</BaseExport>
        <a-button v-print="{ id: 'printMe' }" class="ml-2">打印</a-button>
        <div class="absolute top-[-9999px] hidden">
          <PrintView id="printMe" :data-list="tableData" />
        </div>
        <div class="absolute top-[-9999px] hidden">
          <a-button ref="printLabel" v-print="{ id: 'printLabel' }">打印</a-button>
          <PrintLabel id="printLabel" :row-data="rowData" />
        </div>
      </div>

      <BaseTable
        :data-source="tableData"
        fill
        :expanded-row-keys="expandedRowKeys"
        :loading="loading"
        column-code="000587"
        :pagination="pagination"
        @expand="onShowDetail"
      >
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'NO'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'equipmentName'">
            <MedicineInfo :value="{ mc: record.equipmentName, gg: record.specifications, cj: record.manufacturer }" />
          </template>
          <template v-if="column.dataIndex === 'equipmentNumber'">
            <a-popover placement="bottomRight">
              <template #content>
                <div class="w-[600px] p-5">
                  <BaseTitle title="装备图" />
                  <div class="w-full form-style-flex h-[364px]">
                    <div v-if="fileList.length" class="clearfix">
                      <a-upload v-model:file-list="fileList" disabled list-type="picture-card" />
                    </div>
                    <div v-else>
                      <a-empty description="暂无数据" />
                    </div>
                  </div>
                </div>
              </template>
              <div class="text-primary hover:underline cursor-pointer" @mouseover="getImgData(record)">{{ record.equipmentNumber }}</div>
            </a-popover>
          </template>
          <template v-if="column.dataIndex === 'status'">
            <a-tag :color="statusEnum[record.status].color">{{ statusEnum[record.status].text }}</a-tag>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-space>
              <BaseButton type="link" size="small" @click="onCLickEdit(record)"> 动态查询 </BaseButton>
              <BaseButton type="link" size="small" @click="onCLickCheckin(record)"> 标签 </BaseButton>
            </a-space>
          </template>
        </template>
      </BaseTable>
    </a-card>
    <Search v-model:open="editOpen" :row-data="rowData" @success="onSuccess" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'
import Search from './Search.vue'
import PrintView from './PrintView'
import PrintLabel from './PrintLabel'

const editOpen = ref(false)
const rowData = ref({})
const formRef = ref(null)
const statusEnum = [
  { text: '正常', color: 'green' },
  { text: '借出', color: 'blue' },
  { text: '报修', color: 'red' },
  { text: '报废', color: 'red' },
  { text: '调出', color: 'blue' }
]

const formState = ref({
  zjm: '',
  status: 0,
  deptCode: ''
})
const statusOptions = ref([
  {
    name: '正常',
    value: 0
  },
  {
    name: '借出',
    value: 1
  },
  {
    name: '报修',
    value: 2
  },
  {
    name: '报废',
    value: 3
  },
  {
    name: '调出',
    value: 4
  }
])
const fileList = ref([])

const onSuccess = () => {
  getData()
}
const printLabel = ref(null)

const getImgData = async (record) => {
  const res = await post('war/equipmentDistribution/getEquipmentImageList', { distributionId: record.equipmentCode })

  if (res.code !== 0) {
    fileList.value = []
    return
  }
  fileList.value = res.data.map((item) => {
    return {
      ...item,
      uid: item.id,
      name: item.url,
      status: 'done',
      url: item.url
    }
  })
}

const onCLickCheckin = (record) => {
  rowData.value = record
  setTimeout(() => {
    printLabel.value.$el.click()
  }, 500)
}

const { loading, tableData, getData, pagination } = useTable({
  url: '/war/equipmentDistribution/getEquipmentConfigDictList',
  immediate: true,
  formatParams: () => {
    return {
      ...formState.value
    }
  }
})
const onCLickEdit = (record = {}) => {
  rowData.value = record
  editOpen.value = true
}

onMounted(() => {
  getData()
})
</script>
